<template>
    <view style="min-height: 100vh">
        <!-- 引入过滤器 -->
        <!-- <wxs  module="filter"  src="/miniprogram/miniprogram_npm/@vant/weapp/wxs/filter.wxs"/> -->
        <view>
            <!-- 卡券 -->
            <view v-if="cardList.length" class="card_list_wrap">
                <view class="card_list" @tap.stop.prevent="toCardCoupons" :data-id="item.id" v-for="(item, index) in cardList" :key="index">
                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/tags.png" class="card_tags" v-if="item.expireStatus"></image>
                    <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/tags_new.png" class="card_tags" v-if="item.newStatus"></image>
                    <image :src="item.picture ? item.picture : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line_bg.png'" class="card_list_bg" v-if="item.applyStationType == 1"></image>
                    <image :src="item.picture ? item.picture : 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/line-yellow_bg.png'" class="card_list_bg" v-if="item.applyStationType == 2 || item.applyStationType == 3"></image>
    
                    <view class="card_left">
                        <view>
                            <view class="crad_left_money">
                                <text class="money_type">￥</text>
                                <text class="money_amonut">{{ item.couponAmount }}</text>
                            </view>
                            <view class="voucher_type" v-if="item.applyStationType == 1">通用券</view>
                            <view class="voucher_type" v-if="item.applyStationType == 2">站点专属</view>
                            <view class="voucher_type" v-if="item.applyStationType == 3">指定条件</view>
                        </view>
                    </view>
    
                    <view class="card_right">
                        <view class="coupon_stations">
                            <view class="coupon_type flex-row-start">
                                <view v-if="item.type == 1">服务费券</view>
                                <view v-if="item.type == 2">电费券</view>
                                <view v-if="item.type == 3">现金券</view>
    
                                <view class="refund_btn flex-row-center" v-if="item.status == 5">退款冻结</view>
                            </view>
                            <view class="stations" @tap="naviStations">
                                <view class="flex-row-start">
                                    <view v-if="item.applyStationType == 2">适用站点</view>
                                    <view v-if="item.applyStationType == 3">指定条件</view>
                                    <image v-if="item.applyStationType == 2 || item.applyStationType == 3" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/turn.png" alt="" class="turn" />
                                </view>
                            </view>
                        </view>
                        <!-- <view class="coupon_stations">
                        <view  class="coupon_type" >{{item.typeName}}</view>
                        <view class="stations" wx:if="{{item.availableSiteName}}" data-stations="{{item.availableSiteName}}">
                          <view>限部分站点</view> 
                          <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/turn.png" alt="" class="turn"/>   
                        </view>
                    </view> -->
                        <view class="full_reduction">满{{ item.meetAmount }}可用</view>
                        <view class="validity_date flex-row-start">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon1.png" class="time_icon" />
                            {{ item.receiveTime }}
                        </view>
                        <view class="validity_date flex-row-start">
                            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/mine/images/icon2.png" class="time_icon" />
                            {{ item.expireTime }}
                        </view>
                    </view>
                </view>
            </view>
            <Upgrading text="暂无内容" v-else></Upgrading>
            <!-- 历史卡券,卡券中心 -->
            <view class="ticket_center">
                <view class="ticket_center_type" @tap="naviHistoryCard">历史卡券</view>
                <!-- <view class="ticket_center_vertical"></view>
            <view class="ticket_center_type">券码中心</view> -->
            </view>
        </view>
        <!-- 站点弹窗 -->
        <u-popup @close="onClose" position="center" :show="stationsVisible" custom-style="border-radius: 20rpx;" class="announcement-popup">
            <view class="announcement">
                <view class="announcement-content">
                    <view class="announcement-title">适用站点</view>
                    <view class="announcement-body">{{ stations }}</view>
                </view>
                <view class="announcement-close" @tap="stationsConfirm">我知道了</view>
            </view>
        </u-popup>
    </view>
    </template>
    
    <script lang="ts">
    // import zpMixins from '@/uni_modules/zp-mixins/index';
    import Upgrading from '@/marketing_page/components/upgrading/upgrading';
    // import vanPopup from './@vant/weapp/popup/index';
    // mine/pages/cardVoucher/cardVoucher.ts
    import {
        getMyCouponPage
    } from '../../../api/https';
    import {
        getPageCoupon,
        getUserCouponLists
    } from '../../../api/marketing/coupon';
    export default {
        components: {
            Upgrading,
            // vanPopup
        },
        data() {
            return {
                cardList: [],
                stationsVisible: false,
                stations: '',
                page: 1,
                pageNum: 0,
                loading: false,
                config: {
                    current: 1,
                    size: 10
                }
            };
        },
        onLoad: function () {
            // this.CouponPage(2)
            this.getCouponLists();
            this.getMyCouponPage();
        },
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom() {
            this.getMyCouponPage();
            // let page = this.data.page + 1; //获取当前页数并+1
            // if (this.data.page < this.data.pageNum) {
            //   this.setData({
            //     page
            //   })
            //   this.CouponPage(2)
            // }
        },
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh() {
            // this.data.page = 1
            // if (this.data.cardList.length) {
            //   wx.showNavigationBarLoading(); //在标题栏中显示加载图标
            //   this.CouponPage(1)
            // }
        },
        methods: {
            getCouponLists() {
                getUserCouponLists().then(res => {
                    console.log(res);
                });
            },
            naviHistoryCard() {
                if (this.marketingSwitch) {
                    console.log('营销获客正常,走外包8081逻辑');
                    uni.navigateTo({
                        url: '../historyCardVoucherYx/historyCardVoucherYx'
                    });
    
                } else {
                    console.log('营销获客挂了,走7100逻辑');
                    uni.navigateTo({
                        url: '../historyCardVoucher/historyCardVoucher'
                    });
                }
            },
    
            async getMyCouponPage() {
                try {
                    const res = await getPageCoupon(this.config);
                    let cardList = res.data.records || [];
                    this.setData({
                        cardList: [...this.cardList, ...cardList]
                    });
                    this.config.current++;
                } catch (error) {}
            },
    
            CouponPage(index: any) {
                const tmp = this;
                getMyCouponPage({
                    tab: 1,
                    current: tmp.page,
                    size: 10
                }).then((res: any) => {
                    if (res.code == 0) {
                        const total = res.data.total;
                        const pageNum = Math.ceil(total / 10);
                        let cardList;
                        switch (index) {
                            // 下拉刷新
                            case 1:
                                cardList = res.data.records;
                                uni.hideNavigationBarLoading(); //在标题栏中隐藏加载图标
                                uni.stopPullDownRefresh();
                                break;
                                // 上拉加载或初始化页面
                            case 2:
                                cardList = tmp.cardList.concat(res.data.records);
                                break;
                        }
                        tmp.setData({
                            cardList,
                            pageNum,
                            loading: false
                        });
                    } else if (res.code == 4) {
                        let cardList: any = [];
                        tmp.setData({
                            cardList
                        });
                    }
                });
            },
    
            naviStations(e: any) {
                const {
                    currentTarget: {
                        dataset: {
                            stations
                        }
                    }
                } = e;
                if (stations) {
                    this.setData({
                        stationsVisible: true,
                        stations
                    });
                }
            },
    
            stationsConfirm() {
                this.setData({
                    stationsVisible: false
                });
            },
    
            //去优惠券卡券详情
            toCardCoupons(e: any) {
                // console.log(e.currentTarget.dataset)
                // const items = JSON.stringify(e.currentTarget.dataset.items)
                // console.log(items)
                uni.navigateTo({
                    url: '/homeSub/pages/discount/cardCoupons/cardCoupons?id=' + e.currentTarget.dataset.id
                });
            },
    
            onClose() {
                console.log('占位：函数 onClose 未声明');
            }
        }
    };
    </script>
    
    <style lang="less" scoped>
    @import '../../../commin/commin.less';
    
    page {
        background-color: #f5f7fa;
        padding-bottom: 120rpx;
    }
    
    .card_list_wrap {
        .paddings (20rpx, 24rpx, 4rpx, 24rpx);
    
        .card_list {
            .position (relative, 0, 0, 0, 0);
            width: 704rpx;
            height: 246rpx;
            margin-bottom: 16rpx;
    
            .card_list_bg {
                width: 100%;
                height: 100%;
            }
    
            .card_tags {
                .position (absolute, 0rpx, auto, auto, 0rpx);
                width: 78rpx;
                height: 33rpx;
            }
    
            .card_left {
                .position (absolute, 64rpx, 0, 0, 0);
                .kuan (230rpx);
                .textalign();
    
                .crad_left_money {
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #ffffff;
    
                    .money_type {
                        font-size: 26rpx;
                    }
    
                    .money_amonut {
                        font-size: 52rpx;
                    }
                }
    
                .voucher_type {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    text-align: center;
                }
            }
    
            .card_right {
                .position (absolute, 39rpx, 0, 0, 278rpx);
    
                .coupon_type {
                    font-size: 34rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #1a1a1a;
                }
    
                .coupon_stations {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
    
                    .stations {
                        display: flex;
                        justify-content: start;
                        align-items: center;
                        font-size: 26rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #707485;
                        margin-right: 32rpx;
    
                        .turn {
                            .kuangao (10rpx, 19rpx);
                            margin-left: 11rpx;
                        }
                    }
                }
    
                .full_reduction {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #606266;
                    margin: 15rpx 0;
                }
    
                .validity_date {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #909399;
                    line-height: 1.4;
                }
            }
        }
    }
    
    .time_icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
    
    .refund_btn {
        width: 118rpx;
        height: 32rpx;
        background: rgba(252, 114, 76, 0.06);
        border: 1rpx solid #fc724c;
        border-radius: 16rpx;
        font-size: 22rpx;
        font-weight: 500;
        color: #fc724c;
        margin-left: 7rpx;
    }
    
    .ticket_center {
        position: fixed;
        bottom: 0;
        width: 750rpx;
        height: 102rpx;
        background: #ffffff;
        display: flex;
    
        .ticket_center_type {
            flex: 1;
            font-size: 34rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #303133;
            text-align: center;
            line-height: 102rpx;
        }
    
        .ticket_center_vertical {
            width: 1rpx;
            background-color: #dcdfe6;
        }
    }
    
    .announcement-popup {
        .announcement {
            .kuangao (670rpx, 531rpx);
            background: @white-color;
    
            .announcement-title {
                .fontsize (38rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: #18181a;
                .margins (47rpx, 34rpx, 43rpx, 34rpx);
            }
    
            .announcement-body {
                .paddings (29rpx, 29rpx, 29rpx, 29rpx);
                .kuangao (606rpx, 255rpx);
                overflow-y: scroll;
                .margins (auto, 32rpx, 30rpx, 32rpx);
                box-sizing: border-box;
                background: @text-color6;
                opacity: 0.9;
                border-radius: 10rpx;
                .fontsize (28rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }
    
            .announcement-close {
                width: 270rpx;
                height: 88rpx;
                background: linear-gradient(105deg, #2b99ff, #1b8cf5);
                box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
                border-radius: 44rpx;
                font-size: 30rpx;
                line-height: 88rpx;
                text-align: center;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                position: fixed;
                bottom: 33rpx;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
    </style>
    